import React, { useEffect, useRef } from 'react';
import '../../css/common/RippleEffect.css';

const RippleEffect = () => {
    const containerRef = useRef(null);

    const handleClick = (e) => {
        const x = e.clientX;
        const y = e.clientY;

        // 创建波纹元素
        const ripple = document.createElement('div');
        ripple.classList.add('ripple');

        // 设置位置
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;

        // 随机波纹大小（60-120px）
        const size = Math.random() * 60 + 60;
        ripple.style.width = `${size}px`;
        ripple.style.height = `${size}px`;

        // 随机波纹颜色（基于主题色的变化）
        const colors = [
            'rgba(24, 144, 255, 0.4)',  // 主色
            'rgba(103, 194, 58, 0.4)',   // 成功色
            'rgba(245, 108, 108, 0.4)',  // 警告色
            'rgba(230, 162, 60, 0.4)'    // 信息色
        ];
        const color = colors[Math.floor(Math.random() * colors.length)];
        ripple.style.backgroundColor = color;

        // 添加到容器
        containerRef.current.appendChild(ripple);

        // 动画结束后移除元素
        setTimeout(() => {
            ripple.remove();
        }, 500); // 动画时长缩短为500ms
    };

    useEffect(() => {
        document.addEventListener('click', handleClick);
        return () => document.removeEventListener('click', handleClick);
    }, []);

    return (
        <div
            ref={containerRef}
            className="ripple-container"
        />
    );
};

export default RippleEffect;